<template>
  <view class="home u-p-t-20">
    <view class="home-swiper">
      <!-- <u-swiper :list="swiperList" height="260" interval="5000" duration="1000" border-radius="0" name="image"></u-swiper> -->
      <swiper class="swiper" :indicator-dots="true" indicator-color="#999" indicator-active-color="#333" :autoplay="true" :duration="1000" :circular="true" previous-margin="25rpx" next-margin="25rpx">
        <swiper-item @click="swiperTap(item, index)" v-for="(item, index) in swiperList" :key="index" class="swiper-item">
          <u-image class="image" :src="item.image" mode="aspectFill" width="100%" height="260" border-radius="10"></u-image>
        </swiper-item>
      </swiper>
    </view>
    <view class="home-box u-p-20">
      <view class="home-vip">
        <view class="title u-font-38 u-text-center">VIP尊享服务</view>
        <view class="list u-m-t-40 u-font-26 u-flex">
          <navigator :url="`${item.url}?id=${item.id}&type=1`" open-type="navigate" hover-class="none" v-for="(item, index) in vipList" :key="index" class="item u-rela u-flex-1 u-flex-col u-col-center">
            <u-image class="image" :src="item.image" mode="aspectFill" width="90" height="90"></u-image>
            <view class="name u-m-t-10">{{item.title || ""}}</view>
            <view class="number u-font-24 u-abso">{{item.number || "0"}}次+</view>
          </navigator>
        </view>
      </view>
      <view class="home-legalaid">
        <view class="top u-flex u-col-bottom u-row-between">
          <view class="title u-font-36">
            {{legalaidData.title || ""}}<text class="subname u-m-l-10 u-font-28">{{legalaidData.one_title || ""}}</text>
          </view>
          <navigator :url="`/pages/subpackages/document/document?id=${legalaidData.id}&title=${legalaidData.title}`" open-type="navigate" hover-class="none" class="more u-flex">
            其他 <u-icon name="arrow-right" color="#999"></u-icon>
          </navigator>
        </view>
        <view class="list u-m-t-30 u-font-26 u-flex u-flex-wrap">
          <navigator :url="`/pages/subpackages/submit/release?id=${item.id}`" open-type="navigate" hover-class="none" v-for="(item, index) in legalaidData.ch" :key="index"
            class="item u-flex-col u-col-center u-row-center">
            <u-image class="image" :src="item.image" mode="aspectFill" width="100" height="100"></u-image>
            <view class="name u-m-t-10 u-line-1">{{item.title || ""}}</view>
          </navigator>
        </view>
      </view>
      <view class="home-nav u-font-26 u-flex">
        <navigator :url="item.url" open-type="navigate" hover-class="none" v-for="(item, index) in navList" :key="index" class="item u-flex-1 u-p-20 u-flex u-row-between">
          <view class="left u-m-r-10">
            <view class="name u-m-b-10 u-font-32">{{item.name || ""}}</view>
            <view class="subname">{{item.subname || ""}}</view>
            <view class="subname">{{item.subname1 || ""}}</view>
          </view>
          <u-image class="image" :src="item.image" mode="aspectFill" width="100" height="100"></u-image>
        </navigator>
      </view>
      <view class="home-guidance">
        <view class="top u-flex u-col-bottom u-row-between">
          <view class="title u-font-36">
            {{guidanceData.title || ""}}<text class="subname u-m-l-10 u-font-28">{{guidanceData.one_title || ""}}</text>
          </view>
          <navigator :url="`/pages/subpackages/document/document?id=${guidanceData.id}&title=${guidanceData.title}`" open-type="navigate" hover-class="none" class="more u-flex">
            其他 <u-icon name="arrow-right" color="#999"></u-icon>
          </navigator>
        </view>
        <view class="list u-m-t-30 u-font-26 u-flex">
          <navigator :url="`/pages/subpackages/submit/release?id=${item.id}`" open-type="navigate" hover-class="none" v-for="(item, index) in guidanceData.ch" :key="index" class="item u-flex-col u-col-center">
            <u-image class="image" :src="item.image" mode="aspectFill" width="100" height="100"></u-image>
            <view class="name u-font-30">{{item.title || ""}}</view>
            <view class="subname">{{item.one_title || ""}}</view>
            <view class="price u-m-t-6">￥<text class="u-font-28">{{item.money || ""}}</text></view>
          </navigator>
        </view>
      </view>
      <view class="home-document">
        <view class="top u-flex u-col-bottom u-row-between">
          <view class="title u-font-36">合同文书</view>
          <navigator url="/pages/subpackages/document/document" open-type="navigate" hover-class="none" class="more u-flex">
            其他 <u-icon name="arrow-right" color="#999"></u-icon>
          </navigator>
        </view>
        <view class="list u-m-t-30 u-p-20 u-flex u-flex-wrap u-row-between">
          <navigator url="/pages/subpackages/document/document" open-type="navigate" hover-class="none" class="item active">
            <u-image src="/static/img/home-document.png" mode="aspectFill" width="100%" height="300"></u-image>
          </navigator>
          <div class="item active">
            <navigator :url="`/pages/subpackages/submit/release?id=${item.id}`" open-type="navigate" hover-class="none" v-for="(item, index) in documentList1" :key="index" class="column u-p-20 u-flex">
              <u-image class="image" :src="item.image" mode="aspectFill" width="75" height="75"></u-image>
              <view class="info u-flex-1 u-m-l-20">
                <view class="name u-m-b-10 u-font-32 u-line-1">{{item.title || ""}}</view>
                <view class="u-flex u-row-between">
                  <view class="price">￥{{item.money || "0.00"}}</view>
                  <view class="number u-font-26">{{item.num || ""}}份</view>
                </view>
              </view>
            </navigator>
          </div>
          <navigator :url="`/pages/subpackages/submit/release?id=${item.id}`" open-type="navigate" hover-class="none" v-for="(item, index) in documentList2" :key="index" class="item column u-p-20 u-flex">
            <u-image class="image" :src="item.image" mode="aspectFill" width="75" height="75"></u-image>
            <view class="info u-flex-1 u-m-l-20">
              <view class="name u-m-b-10 u-font-32 u-line-1">{{item.title || ""}}</view>
              <view class="u-flex u-row-between">
                <view class="price">￥{{item.money || "0.00"}}</view>
                <view class="number u-font-26">{{item.num || ""}}份</view>
              </view>
            </view>
          </navigator>
        </view>
      </view>
      <view class="home-guidance">
        <view class="top u-flex u-col-bottom u-row-between">
          <view class="title u-font-36">
            {{adviserData.title || ""}}<text class="subname u-m-l-10 u-font-28">{{adviserData.one_title || ""}}</text>
          </view>
          <navigator :url="`/pages/subpackages/document/document?id=${adviserData.id}&title=${adviserData.title}`" open-type="navigate" hover-class="none" class="more u-flex">
            其他 <u-icon name="arrow-right" color="#999"></u-icon>
          </navigator>
        </view>
        <view class="list u-m-t-30 u-font-26 u-flex">
          <navigator :url="`/pages/subpackages/submit/release?id=${item.id}`" open-type="navigate" hover-class="none" v-for="(item, index) in adviserData.ch" :key="index" class="item u-flex-col u-col-center">
            <u-image class="image" :src="item.image" mode="aspectFill" width="100" height="100"></u-image>
            <view class="name u-font-30">{{item.title || ""}}</view>
            <view class="subname">{{item.one_title || ""}}</view>
            <view class="price u-m-t-6">￥<text class="u-font-28">{{item.money || ""}}</text></view>
          </navigator>
        </view>
      </view>
      <view class="home-recruit">
        <view class="top u-flex u-col-bottom u-row-between">
          <view class="title u-font-36">法职招聘</view>
          <navigator url="/pages/subpackages/classify/recruit/index" open-type="navigate" hover-class="none" class="more u-flex">
            更多 <u-icon name="arrow-right" color="#999"></u-icon>
          </navigator>
        </view>
        <view class="select u-m-t-30 u-flex">
          <view v-for="(item, index) in recruitClassifyList" :key="index" class="item">
            <u-tag @click="recruiClassifyChange(item)" shape="circle" :text="item.title" :bg-color="item.switch == 1 ? '#fff' : '#389bf2'" :color="item.switch == 1 ? '#999' : '#fff'"
              :border-color="item.switch == 1 ? '#fff' : '#389bf2'" />
          </view>
        </view>
        <recruit-list :recruit-list="recruitList"></recruit-list>
        <view class="u-m-t-20">
          <u-empty v-if="!recruitList.length" text="列表为空" mode="list"></u-empty>
        </view>
      </view>
      <view class="home-product">
        <view class="top u-m-b-20 u-flex u-col-bottom u-row-between">
          <view class="title u-font-36">法律商城</view>
        </view>
        <product-list :product-list="productList"></product-list>
      </view>
    </view>
    <!-- #ifdef H5 -->
    <com-link-nav :status="false" iconName="home" title="服务端"></com-link-nav>
    <!-- #endif -->
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "user-home",
  data() {
    return {
      swiperList: [],
      vipList: [],
      legalaidData: {},
      navList: [
        {
          url: "/pages/subpackages/demand/forensics?id=3&title=异地查档",
          name: "异地查档",
          subname: "诉讼中",
          subname1: "主体资料证据",
          image:
            "https://lzj.shandongweipai.com/uploads/20220302/9103e8c33564bd08648efdc6e84cca2c.png",
        },
        {
          url: "/pages/subpackages/demand/entrust?id=4&title=案件代理",
          name: "案件代理",
          subname: "省心",
          subname1: "诉讼全程代办",
          image:
            "https://lzj.shandongweipai.com/uploads/20220302/562e006c7e20f91f21ad3356c3457231.png",
        },
      ],
      guidanceData: {},
      adviserData: {},
      recruitClassifyList: [],
    };
  },
  props: {
    // 文书广场
    documentList1: {
      type: Array,
      default: () => [],
    },
    // 文书广场
    documentList2: {
      type: Array,
      default: () => [],
    },
    // 招聘列表
    recruitList: {
      type: Array,
      default: () => [],
    },
    // 产品列表
    productList: {
      type: Array,
      default: () => [],
    },
    // 状态
    status: {
      type: String,
      default: "nomore",
    },
  },
  computed: {
    ...mapState(["vuex_user_id", "vuex_identity"]),
  },
  mounted() {
    this.getHomeBanner();
    this.getHomeNavList();
    this.getHomeRecruitClassifyList();
  },
  methods: {
    // banner图
    getHomeBanner() {
      this.$api.getHomeBanner().then((res) => {
        console.log(res);
        this.swiperList = res;
      });
    },
    // 跳转
    swiperTap(data, index) {
      if (index == 1) {
        uni.navigateTo({ url: "/pages/subpackages/mine/join/join" });
      } else if (index == 2) {
        uni.navigateTo({ url: "/pages/subpackages/mine/member/index" });
      }
    },
    // 导航
    getHomeNavList() {
      this.$api.getHomeNavList().then((res) => {
        console.log(res);
        let data = res.jtype;
        data.forEach((item) => {
          if (item.num >= 10000) {
            item.number = (item.num / 10000).toFixed(1) + "万";
          } else {
            item.number = item.num;
          }
        });
        this.vipList = data;
        this.legalaidData = res.on_site_legal_aid;
        this.guidanceData = res.private_prosecution_guidance;
        this.adviserData = res.business_doctor;
      });
    },
    // 招聘分类列表
    getHomeRecruitClassifyList() {
      // this.$api.getHomeRecruitClassifyList().then((res) => {
      //   console.log(res);
      // });
      this.$api.dropDown.getRecruitType({ type: 7 }).then((res) => {
        // console.log(res);
        let data = res;
        data.pop();
        data.forEach(() => {
          data[0].switch = 2;
        });
        this.recruitClassifyList = data;
        this.$emit("recruiClassifyChange", data[0].id);
      });
    },
    // 选择
    recruiClassifyChange(e) {
      this.recruitClassifyList.forEach((item, index) => {
        this.recruitClassifyList[index].switch = e.id == item.id ? 2 : 1;
      });
      this.$emit("recruiClassifyChange", e.id);
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  min-height: 100vh;
  /* #ifdef H5 */
  min-height: calc(100vh - 94px);
  /* #endif */
  background-color: $uni-bg-color-grey;

  &-swiper {
    .swiper {
      height: 260rpx;

      &-item {
        margin: 0 auto;
        padding: 0 5rpx;
      }
    }
  }

  &-vip {
    .list {
      font-weight: bold;
    }

    .item {
      background-size: cover;
      background-position: center;
      border-radius: 10rpx;

      &:nth-child(2) {
        margin: 0 20rpx;
      }

      .number {
        top: -25rpx;
        left: 50%;
        padding: 2rpx 10rpx;
        border-radius: 20rpx 20rpx 20rpx 0;
        background-image: linear-gradient(to left top, #ff1e00, #ff6724);
        color: $uni-text-color-inverse;
      }
    }
  }

  &-legalaid {
    margin: 20rpx 0;
    padding: 20rpx 0;
    background-color: $uni-bg-color;
    border-radius: 10rpx;

    .top {
      padding: 0 20rpx;
    }

    .subname {
      color: $uni-text-color-dark;
    }

    .more {
      color: $uni-text-color-grey;
    }

    .item {
      flex: 0 0 25%;

      &:nth-child(n + 5) {
        margin: 20rpx 0 0;
      }
    }
  }

  &-nav {
    .item {
      background-color: $uni-bg-color;
      border-radius: 10rpx;

      &:nth-child(2n) {
        margin-left: 20rpx;
      }
    }

    .subname {
      color: $uni-text-color-grey;
    }
  }

  &-guidance {
    margin: 30rpx 0;

    .top {
      .subname {
        color: $uni-text-color-dark;
      }

      .more {
        color: $uni-text-color-grey;
      }
    }

    .list {
      overflow-x: scroll;

      &::before {
        width: 0;
        height: 0;
        color: transparent;
      }

      .item {
        flex: 0 0 30%;
        padding: 20rpx 0;
        background-color: $uni-bg-color;
        border-radius: 10rpx;

        &:nth-child(n + 2) {
          margin-left: 20rpx;
        }
      }

      .name {
        margin: 10rpx 0;
      }

      .subname {
        color: $uni-text-color-grey;
      }

      .price {
        color: $uni-text-color-main-red;
      }
    }
  }

  &-document {
    .more {
      color: $uni-text-color-grey;
    }

    .list {
      background-color: $uni-bg-color;
      border-radius: 10rpx;

      .item {
        flex: 0 0 48%;
        width: 48%;

        &.active {
          height: 300rpx;
        }
      }

      .column {
        height: 140rpx;
        background-color: #f4f2fa;
        border-radius: 10rpx;

        &:nth-child(n + 2) {
          margin: 20rpx 0 0;
        }
      }

      .price {
        color: $uni-text-color-main-red;
      }

      .number {
        color: $uni-text-color-dark;
      }
    }
  }

  &-adviser {
    .more {
      color: $uni-text-color-grey;
    }

    .list {
      padding: 0 30rpx;

      .item {
        flex: 0 0 48%;
        height: 150rpx;
        background-size: cover;
        background-position: center;
        border-radius: 10rpx;
      }

      .price {
        color: $uni-text-color-main-red;
        left: 36rpx;
        bottom: 32rpx;
      }
    }
  }

  &-recruit {
    margin: 30rpx 0;

    .more {
      color: $uni-text-color-grey;
    }

    .select {
      overflow-x: scroll;

      &::before {
        width: 0;
        height: 0;
        color: transparent;
      }

      .item {
        flex: 0 0 auto;

        &:nth-child(n + 2) {
          margin-left: 20rpx;
        }
      }
    }
  }
}
</style>
